<template>
  <el-menu class="nav" :default-active="activeMenu" mode="horizontal">
    <navbar-item v-for="(route, index) in navaRoutes" :key="index" :item="route" :base-path="route.path" />
  </el-menu>
</template>

<script>
import { navaRoutes } from "@/router";
import NavbarItem from "./NavbarItem.vue";
export default {
  name: "Navbar",
  components: { NavbarItem },
  created () {
    // console.log(navaRoutes);
  },
  data () {
    return {
      navaRoutes: navaRoutes,
    };
  },
  computed: {
    activeMenu () {
      const route = this.$route;
      const { meta, path } = route;
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
  },
};
</script>

<style lang="scss" scoped>
.nav {
  @apply flex-grow flex items-center justify-around text-t333;

}
</style>
